<template>
    <el-select class="g-width100"
               ref="elSelect"
               filterable
               :disabled="disabled"
               :readonly="readonly"
               v-model="localValue"
               :placeholder="placeholder"
               v-on:focus="handleFocus($event)"
               v-on:blur="handleBlur($event)"
               v-on:change="emitChange"
               v-on:input="emitInput"
    >
        <el-option label="请选择" :value="empty" v-if="showEmpty"></el-option>
        <el-option
                v-for="item in dictItems"
                :label="item.name"
                :disabled="item.isDisabled || false"
                :value="item.id"
                :key="item.id"
        ></el-option>
    </el-select>
</template>

<script>
    export default {
        name: 'SelectDict',
        props: {
            value: {
                required: true
            },
            placeholder:{
                type: String,
                default: '请选择'
            },
            // 是否显示请选择
            showEmpty: {
                type: Boolean,
                default: true
            },
            // 字典组编码
            groupCode: {
                type: String,
                required: true
            },
            // 是否禁用
            disabled:{
                type:Boolean,
                default:false
            },
            readonly:{
                type:Boolean,
                default:false
            }
        },
        data () {
            return {
                localValue: this.value,
                empty: null,
                dictItems: [],
                isEmitDictCode: false
            }
        },
        mounted () {
            this.getDictItemByGroupCode(this.groupCode)
            this.delayEmitDictCode(0)
        },
        methods: {
            handleFocus (event) {
                this.$emit('focus', event)
            },
            handleBlur (event) {
                this.$emit('blur', event)
            },
            emitChange (val) {
                this.$emit('change', val)
                this.$emit('dictCode', this.getItemCodeById(val))
            },
            emitInput (val) {
                this.$emit('input', val)
                this.$emit('dictCode', this.getItemCodeById(val))
            },
            getItemCodeById(id){
                let code = ''
                this.dictItems.forEach(item => {
                    if(item.id == id){
                        code = item.code
                        return false
                    }
                })
                return code
            },
            // 加载字典
            getDictItemByGroupCode (groupCode) {
                this.axios.get(this.$baseURL.base +  '/base/dict/items/' + groupCode).then(res => {
                    this.dictItems = res.data
                    this.delayEmitDictCode(0)
                }).catch(error=>{
                    this.dictItems = []
                    this.delayEmitDictCode(0)
                    if(error.response){
                        if(error.response.status != 404){
                            this.$message.error(error.response.data.msg)
                        }
                    }else {
                        this.$message.error('网络错误或服务不可用')
                    }
                })
            },
            delayEmitDictCode(tryNum){

                if(this.localValue && this.isEmitDictCode == false){
                    let code = this.getItemCodeById(this.localValue)
                    if(code){
                        this.isEmitDictCode = true
                        this.$emit('input', this.localValue)
                        this.$emit('change', this.localValue)
                        this.$emit('dictCode', code)
                    }else {
                        if(tryNum <= 0){
                            return
                        }
                        setTimeout(()=>{
                            this.delayEmitDictCode(tryNum - 1)
                        },1000)
                    }
                }
            }
        },
        watch: {
            value(val){
                this.localValue = val
                this.delayEmitDictCode(2)
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
